<template>
<div class="left-pages" :style="openShutStyle">
  <div class="left-page-list">
    <el-collapse v-model="activeNames" accordion>
      <el-collapse-item name="collapse-1">
        <template #title>
          页面<i class="jy-icon-plus right" @click.stop="onAddPage($event, 1)"></i>
        </template>
        <collapse-page :type="1"></collapse-page>
      </el-collapse-item>
      <el-collapse-item name="collapse-2">
        <template #title>
          弹层<i class="jy-icon-plus right" @click.stop="onAddPage($event, 2)"></i>
        </template>
        <collapse-page :type="2"></collapse-page>
      </el-collapse-item>
    </el-collapse>
  </div>
  <i v-if="siteAttrs.h5Type == H5_TYPE.canvas" class="jy-icon-preview1 open-shut-left" @click="onOpenShut"></i>
</div>

</template>

<script>
import { reactive } from 'vue'
import { mapActions, mapState } from 'vuex'
import CollapsePage from '@/views/components/collapse-page.vue'
import { H5_TYPE } from '@/common/const-dif'

export default {
  name: "Left",
  setup () {
    const state =  reactive({
      openShutStyle: { left: 0 },
      activeNames: ['collapse-1'],
      isOPen: false,
    })
    const state_ = {
      H5_TYPE: H5_TYPE,
    }
    _.merge(state, state_)
    return state
  },
  components: {
    CollapsePage
  },
  computed: {
    ...mapState("components", {
      siteAttrs: state => state.attrs,
      allPages: state => state.pages,
      id: state => state.id,
    }),
  },
  methods: {
    ...mapActions("components", {
      addPage: "addPage",
    }),
    onAddPage(e, type) {
      e.stopPropagation();
      e.preventDefault();
      //是页面还是弹出层1 页面 2 弹出层
      this.addPage({ type });
    },
    onOpenShut(){
      this.isOPen = !this.isOPen
      if(this.isOPen){
        this.openShutStyle.left = "-200px"
      }else{
        this.openShutStyle.left = "0"
      }
    },
  },
};
</script>
